<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="biliblililogin.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4609723_4c8fbc5h3v8.css">
</head>
<body>

   
    
    <div class="logincontent"  style="position: relative;border-radius: 10px; width: 820px;left: 300px; background-color: white;">
        
    <div class="box">
        <div class="left" style="width: 250px;">
            
            <div class="code1" @mouseover="xianshi=2" @mouseout="xianshi=1" >
                <p v-show="xianshi<3">扫描二维码登录</p>
                <div v-show="xianshi===1"><img src="./img/1.png" alt="" ></div>
                <div v-show="xianshi===2"><img src="./img/2.png" alt="" width="250px" height="160px"></div>
            </div>
            <div class="code3" v-show="xianshi===3">
                <p>扫描下载客户端</p>
                <img src="./img/3.png" alt="" width="160px" height="160px">

            </div>
            <p>请使用&nbsp;<a href="" @mouseover="xianshi=3" @mouseout="xianshi=1">哔哩哔哩客户端</a></p>
            <p>扫码登录或扫码下载APP</p>
        </div>
        <div class="right" style="margin-top: 20px;">
            <div class="logintype" >
                <div class="logintype0"><a  @click="xian=1" :class="{active:xian===1}">密码登录</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a  @click="xian=2" :class="{active:xian===2}">短信登录</a></div>
                <div class="pwdlogin" v-show="xian===1">
                    <div class="shuru" style="padding: 10px;">
                    <div>账号<input type="text" placeholder="请输入帐号"></div>
                    <hr>
                    <div>密码<input @focus="show=1" @blur="show=2" :type="showpwd?'text':'password'" placeholder="请输入密码" ><span class="iconfont icon-xianshimima" @click="btn=2,showpwd=!showpwd" v-show="btn===1"></span><span class="iconfont icon-guanbi" @click="btn=1,showpwd=!showpwd" v-show="btn===2"></span><a  style="color: blue;" @click="showfp=!showfp">忘记密码？</a></div> 
                   </div>
                   <div class="forgetpwd" style="border: 1px solid black;position: absolute;background-color: white; right: 0;" v-show="showfp===true">
                    <a href="" style="color: black;"><p>发送短信快捷登录</p><p style="font-size: 13px;">未注册或绑定哔哩哔哩的手机号，将帮你注册新账号</p></a>
                    <a href="" style="color: black;"><p>去找回密码</p><p style="font-size: 13px;">通过绑定的手机号/邮箱重置密码</p></a>
                   </div>
                   <div class="btn0">
                   <button @click="xian=2" >注册</button><button style="background-color: blue;color: white;">登录</button>
             </div></div>
                <div class="msglogin" v-show="xian===2">
                    <div class="shuru0" style="padding: 10px;">
                        <div><span @click="showmoad=!showmoad" style="display: inline-block;width: 48px;">{{val}}</span><input  type="text" placeholder="请输入手机号" style="border-right: 1px solid black; "><a href="" style="margin-left: 20px;">获取验证码</a></div>
                        <hr>
                        <div>验证码<input type="text" placeholder="请输入验证码" @focus="show=1" @blur="show=2"></div>
                    </div>
                    <div class="mf" v-show="showmoad===true" style="position: absolute;top:90px;background-color: white;border: 1px solid black;">
                        <li v-for="(v,k) in mobileaddress" @click="showmoad=!showmoad,val=v.mobile" style="display: flex;    justify-content: space-between;"><span>{{v.address}}</span><span>{{v.mobile}}</span></li>
                    </div>
                    <button style="background-color: blue;color: white;width: 160px;height: 40px;border-radius:10px ;margin: 20px 110px 0; ">登录/注册</button>
                </div>
                
            
            </div>
            <div class="otherlogin" style="text-align: center;margin-top: 30px;">
                <p>其他方式登录</p>
                <div style="display: flex;    align-items: center;justify-content: space-evenly;"> 
                <a href="" style="display: flex;    align-items: center;"><img src="img/4.png" width="30px" height="30px">微信登录</a>
                <a href="" style="display: flex;    align-items: center;"><img src="img/5.png" width="30px" height="30px">微博登录</a>
                <a href="" style="display: flex;    align-items: center;"><img src="img/6.png" width="30px" height="30px">QQ登录</a>
                 </div>
        </div>
        </div>
       
    </div>
    <div class="footer" style="text-align: center; width: 820px;height: 100px;">
        <p>未注册过哔哩哔哩的手机号，我们将自动帮你注册账号</p>
        <p>登录或完成注册即代表你同意&nbsp;<a href="">用户协议</a>&nbsp;和&nbsp;<a href="">隐私政策</a></p>
        <img src="img/9.png" v-show="show===2" style="position: absolute;left: 0;">
        <img src="img/8.png" v-show="show===1" style="position: absolute;left: 0;"> 
        <img src="img/10.png" v-show="show===2" style="position: absolute;right: 0;">
        <img src="img/7.png" v-show="show===1" style="position: absolute;right: 0;">
         
    </div>
   
    </div>
    
    
</body>
<script src="vue.global.js"></script>
<script>
    const {createApp,ref}=Vue
  
    createApp({
        setup(){
            let xianshi=ref(1)
            let xian=ref(1)
            let show=ref(2)
            let showpwd=ref(true)
            let btn=ref(1)
            let showfp=ref(false)
            let mobileaddress=ref([{address:"中国大陆",
                mobile:"+86"
            },{address:"中国香港特别行政区",mobile:"+852"},
            {address:"中国澳门特别行政区",mobile:"+853"},
            {address:"中国台湾",mobile:"+886"},
            {address:"美国",mobile:"+1"},
            {address:"比利时",mobile:"+32"}])
            let showmoad=ref(false)
            let val=ref('+86')
            
            return{
                xian,show, xianshi,showpwd,btn,showfp,mobileaddress,
                showmoad,val
            }
        }
    }).mount(".logincontent")
    createApp({
        setup(){
            let showlogin=ref(false)
            return{
                showlogin
            }
        }
    }).mount(".content")
  

</script>
</html>